<template>
	<div class="menus">
		<header>
			<span>全部订单</span>
			<span>
				查看全部
				<i class="iconfont icon-jiantouyou"></i>
			</span>
		</header>
		<div class="menus-list">
			<ul>
				<li>
					<img src="../../../assets/img/menu01.png" >
					<p>待付款</p>
				</li>
				<li>
					<img src="../../../assets/img/menu02.png" >
					<p>已付款</p>
				</li>
				<li>
					<img src="../../../assets/img/menu03.png" >
					<p>待评价</p>
				</li>
				<li>
					<img src="../../../assets/img/menu04.png" >
					<p>退款/售后</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default{
	name:'Menus'
}
</script>

<style scoped>
.menus{
	width: 90%;
	margin: 1rem auto 0;
	padding: 0 0.2rem 0.5rem 0.2rem;
	height: 2rem;
	border-radius: 0.2rem;
	overflow: hidden;
	background-color: white;
}
.menus header{
	line-height: 0.8rem;
	display: flex;
	color: #737373;
	align-items: center;
	justify-content: space-between;
}
.menus header span:first-child{
	font-size: 0.4rem;
	color: black;
}
.menus .menus-list ul{
	margin-top: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.menus .menus-list ul li{
	width: 25%;
	text-align: center;
}
.menus .menus-list ul li img{
	width: 40%;
}
.menus .menus-list ul li p{
	line-height: 0.5rem;
}
</style>
